<template>
  <div class="list-page" style="background: transparent;padding: 0;margin: 0">
    <!-- 操作组 -->
    <div class="header-bar" style="text-align: left;padding: 16px 24px">
      <Button :loading="loading" icon="h-icon-check" color="primary" @click="saveConfig"><Lang zh="保存"/></Button>
      <Button icon="h-icon-refresh" @click="reload"><Lang zh="刷新"/></Button>
    </div>
    <div class="config-main-panel">
      <!--      <div style="height: 100%;overflow-y: scroll;">-->

      <FiledGroup style="height: 100%">
        <Form :model="configs" :labelWidth="150">
          <div class="config-panel" v-for="(value,key) in meta" :key="key">
            <Legend :title="decode(key)" >
              <template #right>
                <Button :loading="loading" icon="jeicon-save" color="primary" @click="saveConfigItems(value)"><Lang zh="保存"/></Button>
              </template>
              <FormItem v-for="item in value" :key="item.sn" :prop="item.sn">
                <template #label>
                  {{decode(item.title)}}
                  <Tooltip v-if="item.memo" :content="item.memo">
                    <i class="h-icon-info" style="margin-left: 3px"></i>
                  </Tooltip>
                </template>
                <Radio v-model="configs[item.sn]" :datas="getData(item.dataUrl)" v-if="item.control=='Radio'"/>
                <Select v-model="configs[item.sn]" :datas="getData(item.dataUrl)" :deletable="false"
                        v-else-if="item.control=='Select'"/>
                <SwitchList v-model="configs[item.sn]" :datas="getData(item.dataUrl)"
                            v-else-if="item.control=='SwitchList'"/>
                <Switch v-model="configs[item.sn]" v-else-if="item.control=='Switch'"/>
                <Textarea style="resize: none;height: 96px" v-model="configs[item.sn]"
                          v-else-if="item.control=='TextArea'" :placeholder="item.memo"/>
                <NumberInput v-model="configs[item.sn]" v-else-if="item.control=='Number'" :placeholder="item.memo"/>
                <DatePicker v-model="configs[item.sn]" v-else-if="item.control=='Date'"/>
                <DatePicker v-model="configs[item.sn]" type="datetime" v-else-if="item.control=='DateTime'"/>
                <DatePicker v-model="configs[item.sn]" type="time" v-else-if="item.control=='Time'"/>
                <FileUploader v-model="configs[item.sn]" v-else-if="item.control=='File'"/>
                <Input v-model="configs[item.sn]" v-else="item.control=='Input'" :placeholder="item.memo"/>
              </FormItem>
            </Legend>
          </div>
        </Form>
      </FiledGroup>


      <!--      </div>-->
    </div>
  </div>
</template>
<script name="Configs" setup>
import {ajax} from 'framework'
import {ref} from 'vue'
import {message} from 'heyui'
import {$t,decode} from 'i18n'
//数据定义
const meta = ref({});
const configs = ref({});
const loading = ref(false)
const test = ref(11)
const getData = (url) => {
  if (url.startsWith("data:")){
    return JSON.parse(url.substring(5))
  }
  return ajax.data(url, [])
}

const saveConfig = () => {
  loading.value = true
  ajax.post('configs/save', configs.value).then(() => {
    message("配置项已保存")
  }).finally(() => {
    loading.value = false
  })
}
const saveConfigItems=(items)=>{
  if (items.length==0){
    return
  }
  let configValue={}
  for (let item of items){
    configValue[item.sn]=configs.value[item.sn]
  }
  ajax.post('configs/save', configValue).then(() => {
    message("配置项已保存")
  }).finally(() => {
    loading.value = false
  })
}
const reload = async () => {

  let vMeta = await ajax.get('configs/meta')
  let vConfig = await ajax.get('configs/values')

  //需要把值转换后再赋予绑定的值，否则可能出现不能绑定到控件的问题
  for (let k in vMeta.data) {
    for (let v of vMeta.data[k]) {
      let sn = v.sn
      if (v.control == 'Switch') {
        vConfig.data[sn] = vConfig.data[sn] == "true" || vConfig.data[sn] == true
      } else if (v.control == 'Number') {
        vConfig.data[sn] = vConfig.data[sn] ? Number(vConfig.data[sn]) : ''
      }
    }
  }

  meta.value = vMeta.data
  configs.value = vConfig.data
}

reload()
</script>
<style>
.config-main-panel{
  overflow: hidden;
  flex:1;
  padding-left: 24px;
  padding-bottom: 16px;
}
.config-main-panel .filed-group .h-tabs{
  width: 200px;
  background-color: white;
  box-shadow: 2px 1px 4px 0 rgba(0, 21, 41, 0.08);
  border-radius: 5px;
  border:none;
  overflow: hidden;
}
.config-panel {
  box-shadow: 2px 1px 4px 0 rgba(0, 21, 41, 0.08);
  border: none;
  border-radius: 5px;
  margin: 16px 24px;
  padding: 0 24px 16px;
  background: white;
}
</style>

